<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.rqCode" placeholder="收银标识" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.shopCode" placeholder="门店标识" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.merchantCode" placeholder="商户标识" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.paymentStatus" style="width: 140px" placeholder="支付状态" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>

      <el-date-picker class="filter-item"
                      v-model="times"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      align="right">
      </el-date-picker>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-refresh" @click="reset">
        重置
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column label="收银标识/收银名称" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rqCode }} - {{ scope.row.rqCodeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="交易时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付方法" width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="gray">{{ paymentStatusLabel(scope.row.paymentMethod)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="交易金额">
        <template slot-scope="scope">
          <i class="el-icon-money"/>
          <span>{{ scope.row.orderAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="支付状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.paymentStatus | statusFilter">{{ getPaymentStatusLabel(scope.row.paymentStatus)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="门店标识/门店名称" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.shopCode }} - {{ scope.row.shopName }}
        </template>
      </el-table-column>
      <el-table-column label="商户标识/商户名称" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.merchantCode }} - {{ scope.row.merchantName }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
  </div>
</template>

<script>

import { getOrderList } from '@/api/order'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'gray',
        2: 'danger',
        3: 'danger'
      }
      console.log(status, statusMap[status])
      return statusMap[status]
    }
  },
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      downloadLoading: false,
      list: null,
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        merchantCode: null,
        rqCode: null,
        shopCode: null,
        paymentStatus: null,
        startTime: null,
        endTime: null
      },
      times: [new Date(new Date(new Date().toLocaleDateString()).getTime()), new Date()],
      sortOptions: [
        { label: '支付成功', key: '1' },
        { label: '支付失败', key: '2' },
        { label: '待支付', key: '0' },
        { label: '支付异常', key: '3' }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近2天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    // 1.判断是否有控制台的参数
    this.listQuery.rqCode = this.$route.params.rqCode;
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.listQuery.startTime = this.times[0].getTime()
      this.listQuery.endTime = this.times[1].getTime()

      getOrderList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.rows
        this.total = response.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    reset() {
      this.listQuery.rqCode = null
      this.listQuery.shopCode = null
      this.listQuery.merchantCode = null
      this.handleFilter()
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['收银标识', '收银名称', '交易时间', '支付方法', '交易金额', '支付状态', '门店标识', '门店名称', '商户标识', '商户名称']
        const filterVal = ['rqCode', 'rqCodeName', 'createdTime', 'paymentMethod', 'orderAmount', 'paymentStatus', 'shopCode', 'shopName', 'merchantCode', 'merchantName']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'trade-record'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    getPaymentStatusLabel(status) {
      const statusMap = {
        1: '支付成功',
        0: '待支付',
        2: '支付失败',
        3: '支付异常'
      }
      return statusMap[status]
    },
    paymentStatusLabel(status) {
      const statusMap = {
        wxqrcode: '微信支付',
        aliqrcode: '支付宝支付'
      }
      console.log(status, statusMap[status])
      return statusMap[status]
    }
  }
}
</script>
